<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <link
      rel="stylesheet"
      href="//unpkg.com/element-plus/theme-chalk/dark/css-vars.css"
    />
    <script src="./vue.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
  </head>
  <body>
    <div id="app">
      <el-button>按钮</el-button>
      <el-input></el-input>
      <el-cascader
        v-model="val"
        :options="options"
        @change="handleChange"
      ></el-cascader>
      <hr />
      <el-date-picker
        v-model="dateResult"
        type="month"
        value-format="YYYY-MM"
        placeholder="选择日期"
      ></el-date-picker>
      <h3>{{dateResult}}</h3>
    </div>
  </body>
  <script src="./options.js"></script>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          val: [],
          options,
          dateResult: "",
        };
      },
      methods: {
        handleChange(value) {
          console.log(value);
        },
      },
    });

    // mounted  beforeUnmount
    app = app
      .use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
      })
      .mount("#app");
  </script>
</html>
